<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @fileOverview 简单列表，直接使用DOM作为列表项
 * @ignore
 */


<span id='global-property-S-'>/**
</span> * @name BUI.List
 * @namespace 列表命名空间
 * @ignore
 */
var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  UIBase = BUI.Component.UIBase,
  UA = BUI.UA,
  DomList = require(&#39;./domlist&#39;),
  KeyNav = require(&#39;./keynav&#39;),
  Sortable = require(&#39;./sortable&#39;),
  CLS_ITEM = BUI.prefix + &#39;list-item&#39;;

<span id='BUI-List-SimpleListView'>/**
</span> * @class BUI.List.SimpleListView
 * 简单列表视图类
 * @extends BUI.Component.View
 */
var simpleListView = BUI.Component.View.extend([DomList.View],{

  setElementHover : function(element,hover){
    var _self = this;

    _self.setItemStatusCls(&#39;hover&#39;,element,hover);
  }

},{
  ATTRS : {
    itemContainer : {
      valueFn : function(){
        return this.get(&#39;el&#39;).find(this.get(&#39;listSelector&#39;));
      }
    }
  }
},{
  xclass:&#39;simple-list-view&#39;
});

<span id='BUI-List-SimpleList'>/**
</span> * 简单列表，用于显示简单数据
 * &lt;p&gt;
 * &lt;img src=&quot;../assets/img/class-list.jpg&quot;/&gt;
 * &lt;/p&gt;
 * xclass:&#39;simple-list&#39;
 * ## 显示静态数组的数据
 * 
 * ** 最简单的列表 **
 * &lt;pre&gt;&lt;code&gt;
 * 
 * BUI.use(&#39;bui/list&#39;,function(List){
 *   var list = new List.SimpleList({
 *     render : &#39;#t1&#39;,
 *     items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
 *   });
 *   list.render();
 * });
 * 
 * &lt;/code&gt;&lt;/pre&gt;
 *
 * ** 自定义模板的列表 **
 *&lt;pre&gt;&lt;code&gt;
 * 
 * BUI.use(&#39;bui/list&#39;,function(List){
 *   var list = new List.SimpleList({
 *     render : &#39;#t1&#39;,
 *     items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
 *   });
 *   list.render();
 * });
 * 
 * &lt;/code&gt;&lt;/pre&gt;
 * 
 * @class BUI.List.SimpleList
 * @extends BUI.Component.Controller
 * @mixins BUI.List.DomList
 * @mixins BUI.List.KeyNav
 * @mixins BUI.Component.UIBase.Bindable
 */
var  simpleList = BUI.Component.Controller.extend([DomList,UIBase.Bindable,KeyNav,Sortable],
{
<span id='global-method-bindUI'>  /**
</span>   * @protected
   * @ignore
   */
  bindUI : function(){
    var _self = this,
      itemCls = _self.get(&#39;itemCls&#39;),
      itemContainer = _self.get(&#39;view&#39;).getItemContainer();

    itemContainer.delegate(&#39;.&#39;+itemCls,&#39;mouseover&#39;,function(ev){
      if(_self.get(&#39;disabled&#39;)){ //控件禁用后，阻止事件
        return;
      }
      var element = ev.currentTarget,
        item = _self.getItemByElement(element);
      if(_self.isItemDisabled(ev.item,ev.currentTarget)){ //如果禁用
        return;
      }
      
      if(!(UA.ie &amp;&amp; UA.ie &lt; 8) &amp;&amp; _self.get(&#39;focusable&#39;) &amp;&amp; _self.get(&#39;highlightedStatus&#39;) === &#39;hover&#39;){
        _self.setHighlighted(item,element)
      }else{
        _self.setItemStatus(item,&#39;hover&#39;,true,element);
      }
      /*_self.get(&#39;view&#39;).setElementHover(element,true);*/

    }).delegate(&#39;.&#39;+itemCls,&#39;mouseout&#39;,function(ev){
      if(_self.get(&#39;disabled&#39;)){ //控件禁用后，阻止事件
        return;
      }
      var sender = $(ev.currentTarget);
      _self.get(&#39;view&#39;).setElementHover(sender,false);
    });
  },
<span id='BUI-List-SimpleList-method-onAdd'>  /**
</span>   * 添加
   * @protected
   */
  onAdd : function(e){
    var _self = this,
      store = _self.get(&#39;store&#39;),
      item = e.record;
    if(_self.getCount() == 0){ //初始为空时，列表跟Store不同步
      _self.setItems(store.getResult());
    }else{
      _self.addItemToView(item,e.index);
    }
    
  },
  handleContextMenu: function(ev) {
    var _self = this,
      target = ev.target,
      itemCls = _self.get(&#39;itemCls&#39;),
      element = $(target).closest(&#39;.&#39; + itemCls),
      item = _self.getItemByElement(element);

    var result = _self.fire(&#39;itemcontextmenu&#39;,{
      element : element,
      item : item,
      pageX : ev.pageX,
      pageY : ev.pageY,
      domTarget : ev.target,
      domEvent : ev
    });
    if(result === false){
      ev.preventDefault();
    }
  },
<span id='BUI-List-SimpleList-method-onRemove'>  /**
</span>   * 删除
  * @protected
  */
  onRemove : function(e){
    var _self = this,
      item = e.record;
    _self.removeItem(item);
  },
<span id='BUI-List-SimpleList-method-onUpdate'>  /**
</span>   * 更新
  * @protected
  */
  onUpdate : function(e){
    this.updateItem(e.record);
  },
<span id='BUI-List-SimpleList-method-onLocalSort'>  /**
</span>  * 本地排序
  * @protected
  */
  onLocalSort : function(e){
    if(this.get(&#39;frontSortable&#39;)){
      this.sort(e.field ,e.direction);
    }else{
      this.onLoad(e);
    }
  },
<span id='BUI-List-SimpleList-method-onLoad'>  /**
</span>   * 加载数据
   * @protected
   */
  onLoad:function(){
    var _self = this,
      store = _self.get(&#39;store&#39;),
      items = store.getResult();
    _self.set(&#39;items&#39;,items);
  },
<span id='BUI-List-SimpleList-method-onFiltered'>  /**
</span>   * 过滤数据
   * @protected
   */
  onFiltered: function(e){
    var _self = this,
      items = e.data;
    _self.set(&#39;items&#39;, items);
  }
},{
  ATTRS : 

  {

<span id='BUI-List-SimpleList-property-frontSortable'>    /**
</span>     * 排序的时候是否直接进行DOM的排序，不重新生成DOM，&lt;br&gt;
     * 在可展开的表格插件，TreeGrid等控件中不要使用此属性
     * @type {Boolean}
     * cfg {Boolean} frontSortable
     */
    frontSortable : {
      value : false
    },
    focusable : {
      value : false
    },
<span id='BUI-List-SimpleList-property-items'>    /**
</span>     * 选项集合
     * @protected
     * @type {Array}
     */
    items : {
      view:true,
      value : []
    },
<span id='BUI-List-SimpleList-cfg-itemCl'>    /**
</span>     * 选项的样式，用来获取子项
     * &lt;pre&gt;&lt;code&gt;
     * var list = new List.SimpleList({
     *   render : &#39;#t1&#39;,
     *   itemCls : &#39;my-item&#39;, //自定义样式名称
     *   items : [{id : &#39;1&#39;,text : &#39;1&#39;,type : &#39;0&#39;},{id : &#39;2&#39;,text : &#39;2&#39;,type : &#39;1&#39;}]
     * });
     * list.render();
     * &lt;/code&gt;&lt;/pre&gt;
     * @cfg {Object} [itemCl=&#39;list-item&#39;]
     */
    itemCls : {
      view:true,
      value : CLS_ITEM
    },
<span id='BUI-List-SimpleList-cfg-idField'>    /**
</span>     * 选项的默认id字段
     * &lt;pre&gt;&lt;code&gt;
     * var list = new List.SimpleList({
     *   render : &#39;#t1&#39;,
     *   idField : &#39;id&#39;, //自定义选项 id 字段
     *   items : [{id : &#39;1&#39;,text : &#39;1&#39;,type : &#39;0&#39;},{id : &#39;2&#39;,text : &#39;2&#39;,type : &#39;1&#39;}]
     * });
     * list.render();
     *
     * list.getItem(&#39;1&#39;); //使用idField指定的字段进行查找
     * &lt;/code&gt;&lt;/pre&gt;
     * @cfg {String} [idField = &#39;value&#39;]
     */
    idField : {
      value : &#39;value&#39;
    },
<span id='BUI-List-SimpleList-property-listSelector'>    /**
</span>     * 列表的选择器，将列表项附加到此节点
     * @protected
     * @type {Object}
     */
    listSelector:{
      view:true,
      value:&#39;ul&#39;
    },
<span id='BUI-List-SimpleList-cfg-itemTpl'>    /**
</span>     * 列表项的默认模板。
     *&lt;pre&gt;&lt;code&gt;
     * var list = new List.SimpleList({
     *   itemTpl : &#39;&amp;lt;li id=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;, //列表项的模板
     *   idField : &#39;value&#39;,
     *   render : &#39;#t1&#39;,
     *   items : [{value : &#39;1&#39;,text : &#39;1&#39;},{value : &#39;2&#39;,text : &#39;2&#39;}]
     * });
     * list.render();
     * &lt;/code&gt;&lt;/pre&gt;
     * @cfg {String} [itemTpl =&#39;&amp;lt;li role=&quot;option&quot; class=&quot;bui-list-item&quot; data-value=&quot;{value}&quot;&amp;gt;{text}&amp;lt;/li&amp;gt;&#39;]
     */
    
    itemTpl :{
      view : true,
      value : &#39;&lt;li role=&quot;option&quot; class=&quot;&#39; + CLS_ITEM + &#39;&quot;&gt;{text}&lt;/li&gt;&#39;
    },
    tpl : {
      value:&#39;&lt;ul&gt;&lt;/ul&gt;&#39;
    },
    xview:{
      value : simpleListView
    }
  }
},{
  xclass : &#39;simple-list&#39;,
  prority : 0
});

simpleList.View = simpleListView;

module.exports = simpleList;
</pre>
</body>
</html>
